<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="cas" width="500" height="500" style="    border: 1px solid;">
    <script>

      var ctx = document.getElementById('cas').getContext('2d');
      var x = 100; // 路径起点 x 坐标
      var y = 100; // 路径起点 y 坐标

      // 保存当前绘图状态
      ctx.save();
      // 移动路径起点
      ctx.translate(x, y);
      // 旋转路径，顺时针旋转 45 度
      ctx.rotate(Math.PI / 4);
      // 开始绘制路径
      ctx.beginPath();
      ctx.moveTo(0, 0); // 将路径移动到相对于起点的坐标 (0, 0)
      ctx.lineTo(100, 0); // 绘制固定长度的线条
      ctx.stroke(); // 绘制线条

      // 恢复之前保存的绘图状态
      ctx.restore();

      // ctx.fillStyle = "orange";
      // ctx.fillRect(50, 50, 100, 50);
      // ctx.rotate(30 * Math.PI / 180);
      // ctx.fillStyle = "green";
      // ctx.fillRect(50, 50, 100, 50);

      //       ctx.moveTo(10, 100);            //定义初始位置
      // ctx.lineTo(30, 10);             //定义连线端点
      // ctx.lineTo(50, 100);            //定义连线端点
      // ctx.lineTo(70, 10);             //定义连线端点
      // ctx.lineTo(90, 100);            //定义连线端点
      // ctx.stroke();

    </script>
</body>

</html>